<template>
  <scroller class="scroller">
    <div class="panel" @click="jumpClick('1')">
      <image src="https://www.rrjiaoyi.com/app/games/bird.jpeg" style="width: 655px;height: 500px;margin-bottom: 20px;"></image>        
      <text class="text-1">flappy bird</text>
      <text class="text-2">我是一只小小小小鸟~</text>
    </div>
    <div class="panel" @click="jumpClick('2')">
      <image src="https://www.rrjiaoyi.com/app/games/jianren.png" style="width: 655px;height: 500px;margin-bottom: 20px;"></image>        
      <text class="text-1">贱人配对</text>
      <text class="text-2">消灭贱人!!!</text>
    </div>
    <div class="panel" @click="jumpClick('3')">
      <image src="https://www.rrjiaoyi.com/app/games/plane.png" style="width: 655px;height: 500px;margin-bottom: 20px;"></image>        
      <text class="text-1">打飞机</text>
      <text class="text-2">经典怀旧游戏</text>
    </div>
  </scroller>
</template>
<script>
export default {
  components: {},
  mounted() {
    // this.$router.push({ path: '/home'})
  },
  data () {
    return {
      tabbar: 'games',
      loading: false
    }
  },
  methods: {
    jumpClick(e) {
      switch(e) {
        case '1':
          this.$router.push(`/artcon?status=b&path=${encodeURIComponent('https://www.rrjiaoyi.com/flappy/')}`)   
          break;
        case '2':
          this.$router.push(`/artcon?status=b&path=${encodeURIComponent('https://www.rrjiaoyi.com/games/jianren/')}`)   
          break;
        case '3':
          this.$router.push(`/artcon?status=b&path=${encodeURIComponent('https://www.rrjiaoyi.com/games/plane/')}`)   
          break;
      }
    }
  }
}
</script>
<style scoped>
  .scroller {
    background-color: #1b1a20;
    flex: 1; 
    width:750px;
    padding:30px 0;
  }
    .panel {
    width: 700px;
    /* height: 250px; */
    padding: 20px;
    margin-left: 25px;
    /* margin-right: 5px; */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  .text-1 {
    font-size: 36px;
    text-align: left;
    color: #333;
  }
  .text-2 {
    font-size: 28px;
    text-align: left;
    color: #777;
  }
</style>